<template>
  <div>
      <van-field label="添加18位银行卡号" v-model="card_number"/>
         &nbsp;&nbsp; 选择银行 ：<select name="" id="" v-model="bankid">
          <option :value="i.id" v-for="i in list" :key="i.id">{{i.name}}</option>
      </select> <br>
      <van-field label="设置支付密码" v-model="pay_password"/>
      <van-field label="确认支付密码" v-model="pay_password1"/>
      <van-field label="手机号:" placeholder="请输入手机号" v-model="phone" style="width: 350px; " ></van-field>
        <van-field label="验证码:" placeholder="请输入验证码" v-model="phone_code" style="width: 350px" >
        <template #button>
            <van-button size="small" type="primary" @click="post_phone_code" v-show="show_phone_code">发送验证码</van-button>
            <van-button size="small" type="primary"  v-show="show_state">
              <van-count-down
                  ref="countDown"
                  millisecond
                  :time="60000"
                  :auto-start="false"
                  format="ss倒计时"
                  @finish="finish_code()"/>
            </van-button>
        </template>
        </van-field>
      <van-button @click="addcard">添加</van-button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:[],
            // 手机号验证码发送
            show_phone_code:true,
            // 手机验证码倒计时
            show_state:false,
            bankid:'',
            card_number:'',
            pay_password:"",
            pay_password1:'',
            phone:'',
            phone_code:'',
            uid:localStorage.getItem('usrid'),
        }
    },
    methods:{
        getbank(){
            axios.get('http://localhost:5000/bankname_list').then(res=>{
                console.log(res.data);
                this.list = res.data.list
            })
        },
        finish_code(){
        // 倒计时结束时
            console.log('1111')
            this.show_phone_code=true
            this.show_state=false
            },
        // 发送短信接口
        post_phone_code(){
            this.show_phone_code = false
            this.show_state=true
            this.$refs.countDown.start();
            // axios.get('http://localhost:5000/mobile_phone?phone='+this.phone).then(res=>{
            //     console.log(res.data);
            // })

        },
        // 银行卡添加接口
        addcard(){
            if(this.pay_password !== this.pay_password1){
                alert('两次密码不一致')
                return false
            }
            var data = {'bankname_id':this.bankid,'card_number':this.card_number,
            'pay_password':this.pay_password1,'mobile':this.phone,'userid':this.uid,
            'smscode':this.phone_code
            }
            axios.post('http://localhost:5000/addbankcard',data).then(res=>{
                console.log(res);
            })
        },


    },
    mounted(){
        this.getbank()
    }
}
</script>

<style>

</style>
